﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="styles/normalize.css" rel="stylesheet" />
    <style>

        ul {
            list-style-type: none;
        }

        .gem {
            background: url(imgs/jewels-sprite.jpg);
            background-repeat: no-repeat;
            background-position: 0 0;
            width: 50px;
            height: 50px;
            display: inline-block;
            margin: 0 10px;
        }

        .gem-black { background-position: 0 0; }        
        .gem-green { background-position: -50px 0; }
        .gem-pink { background-position: -100px 0; }
        .gem-white { background-position: -150px 0; }
        .gem-red { background-position: -200px 0; }
        .gem-blue { background-position: -250px 0; }
        .gem-purple { background-position: -300px 0; }

        </style>
</head>
<body>

    <ul>
        <li><div class="gem gem-black"></div>.gem-black</li>
        <li><div class="gem gem-green"></div>.gem-green</li>
        <li><div class="gem gem-pink"></div>.gem-pink</li>
        <li><div class="gem gem-white"></div>.gem-white</li>
        <li><div class="gem gem-red"></div>.gem-red</li>
        <li><div class="gem gem-blue"></div>.gem-blue</li>
        <li><div class="gem gem-purple"></div>.gem-purple</li>

    </ul>

</body>
</html>
